<!DOCTYPE html>
<html lang="en"
>
<head>
    <meta charset="UTF-8">
    <!--强制让文档与设备的宽度保持1：1,对页面设置不能进行缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <!--必须联网才可以访问,禁止浏览器从本地计算机的缓存中访问页面内容-->
    <meta http-equiv="Cache-Control" name="no-store"/>
    <!--页面描述-->
    <meta name="description" content="社区生活小助手"/>
    <!--页面关键词-->
    <meta name="keywords" content="社区生活小助手"/>
    <!--网页作者-->
    <meta name="author" content="name, 1134135987@qdescriptionq.com"/>
    <!--为移动设备添加 viewport-->
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <!---->
    <title>社区生活小助手</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css?v=<%=Math.random()%>" media="all">
    <!--
    <link rel="stylesheet" href="/layui/css/layui.mobile.css" media="all">
    -->
    <link rel="icon" type="image/x-icon" href="/images/easy9.ico"/>
</head>
<style>
    .tipcss {
        color: #fb0505;
        margin-left: 115px;
    }
</style>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend style="text-align: center;">社区生活小助手</legend>
</fieldset>

<!--购物模块-->
<div id="buyDiv" style="width: 90%;margin-left: 20px;">
    <div style="margin-left: 20px;margin-bottom: 20px;margin-right: 20px;">
        <p style="font-size: 17px;color: #f72e01;">
            购买流程：<br/>
        </p>
        <p style="margin-top: 10px;">
            ①选择小区、商家，然后勾选商品并填写购买数量<br/>
            ②确认订单<br/>
            ③付款<br/>
        </p>
    </div>
    <hr class="layui-bg-orange">
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">选择小区：</label>
            <div class="layui-input-block">
                <select name="communityId" id="community" lay-filter="community-filter" lay-verify="required" lay-search="">
                </select>
            </div>
            <div class="tipcss layui-form-mid layui-word-aux">选择您所居住的小区</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择商家：</label>
            <div class="layui-input-block">
                <select name="storeId" id="store" lay-verify="required" lay-filter="store-filter" lay-search="">
                </select>
            </div>
            <div class="tipcss layui-form-mid layui-word-aux">选择在哪一商家购物</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">楼号</label>
            <div class="layui-input-block">
                <input type="text" name="buildingNumber" maxlength="10" value="" required lay-verify="required" placeholder="请输入您的楼栋号" autocomplete="off" class="layui-input">
            </div>
            <div class="tipcss layui-form-mid layui-word-aux">请输入您的收获地址。方便送货</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phoneNumber" value="" required lay-verify="required|phone" placeholder="请输入您的手机号" autocomplete="off" class="layui-input">
            </div>
            <div class="tipcss layui-form-mid layui-word-aux">请输入您的手机号，方便送货时联系</div>
        </div>

        <div style="margin-left: 20px;margin-bottom: 20px;margin-right: 20px;display: none;" id="sstatementDiv">
            <p style="font-size: 17px;color: #0c0c0c;font-weight: bold;">
                商家郑重说明：<br/>
            </p>
            <p style="margin-top: 10px;">
                <span id="sstatementSpanId"></span>
            </p>
        </div>
    </form>

    <div id="goodsDivId" style="display: none;">
        <hr class="layui-bg-orange">
        <div style="color: #0215f7;font-size: 15px;font-weight: bold;">商品后面输入购买数量即可</div>
        <table class="layui-hide" id="goods1" lay-filter="goodsFilter"></table>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">下一步</button>
            </div>
        </script>
    </div>
    <!--技术支持-->
    <div style="margin-top: 50px;text-align: center;margin-bottom: 20px;">
        <p style="color: #8a8b8c">
            <a id="userNameId" style="text-decoration: underline;font-size: 10px;color: #8a8b8c;">
                汉语小词典1
            </a>
            提供技术支持
        </p>
    </div>
</div>

<!--付款模块-->
<div id="payDiv" style="display: none;">
    <div style="text-align: center;">
        <div>
            <span style="font-size: 20px;color: #080808;">
            您的订单号：
            </span>
            <span id="orderNumId" style="font-size: 30px;color: #fd1308;font-weight: bold;"></span>
            <br/>
            <span style="font-size: 20px;color: #080808;">
            订单总金额：
            </span>
            <span id="orderMoneyId" style="font-size: 30px;color: #fd1308;font-weight: bold;"></span>
        </div>
        <div style="font-size: 15px;color: #0a5cf1;margin-top: 10px;">
            (长按二维码进行付款，付款时请备注好订单号)
        </div>
        <img id="weixinImgId" style="width: 60%;margin: 10px;">
        <div style="font-size: 23px;color: #020410;margin-top: 4px;">
            未转账订单为无效订单
        </div>
        <div style="font-size: 15px;color: #020410;margin-top: 4px;">
            商家负责人：
            <span id="storeLinkUser" style="font-size: 18px;color: #ab3e39;font-weight: bold;"></span>
            <br/>
            联系电话：
            <span id="storeLinkPhone" style="font-size: 18px;color: #ab3e39;font-weight: bold;"></span>
        </div>
    </div>
</div>

<!--技术支持模块-->
<div id="weixinId" style="display: none;">
    <div style="text-align: center;">
        <img src="/images/wjb/wjb_weixin.jpg" style="width: 80%;height: 80%;">
    </div>
</div>

<!--订单详情模块-->
<div id="buyAllGoods" style="display: none;">
    <div style="text-align: center;">
        <div style="text-align: left;margin-bottom: 40px;margin-top: 10px;">
            <span style="font-size: 20px;color: #0c0c0c;">请确认您的订单：</span>
        </div>
        <!---提交到后台的订单详情串-->
        <span id="buyGoodsOrderString" style="display: none;"></span>
        <table id="orderTable" border="0" style="display: inline-block;">
            <thead>
            <tr style="text-align: center;font-weight: bold;font-size: 20px;color: #111312;">
                <td style="width: 40%;">商品名称</td>
                <td style="width: 25%;">单价(元)</td>
                <td style="width: 10%;">数量</td>
                <td style="width: 25%;">合计(元)</td>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
        <div style="font-size: 20px;color: #f92705;font-weight: bold;margin: 30px;">
            <span>订单总金额：</span>
            <span id="orderTotalPrice"></span>
        </div>
        <div class="layui-btn-container">
            <button class="layui-btn" onclick="submitOrder()">提交订单</button>
            <p style="font-size: 14px;color: #484a48;margin-top: 1px;margin-bottom: 20px;">确认无误后，提交订单去付款吧</p>
        </div>
    </div>
</div>

<script src="/layui/layui.all.js?v=<%=Math.random()%>"></script>
<script src="/js/core.util.js?v=<%=Math.random()%>"></script>
<script>
    let $ = jQuery = layui.jquery;
    let layer = layui.layer
        , form = layui.form
        , table = layui.table;
    let trHtml = '';
    let orderTotalPrice = 0;
    layui.use(['layer', 'form', 'table'], function () {

        //渲染社区下拉选择框
        let loadCommunity = function () {
            CoreUtil.sendAjax("/order/getAllCommunity", null, function (res) {
                let communityList = res.data;
                if (communityList != null) {
                    $("#community").empty();//清空下拉选择框
                    $("#community").append(new Option("请选择小区", "-1"));
                    $.each(communityList, function (index, item) {
                        $('#community').append(new Option(item.comName, item.id));
                    });
                } else {
                    $("#community").append(new Option("暂无数据", "-1"));
                }
                layui.form.render("select");
            }, "GET", false, function (res) {
                layer.msg("抱歉！您暂无获取列表的权限");
            });
        };

        loadCommunity();

        //选择小区后，关联商家
        form.on('select(community-filter)', function (data) {
            let communityIdValue = data.value;  //选中的社区值
            if (communityIdValue != '-1') {
                CoreUtil.sendAjax("/order/getAllCommunity/" + communityIdValue, null, function (res) {
                    let storeList = res.data;
                    if (storeList != null) {
                        $("#store").empty();//清空下拉选择框
                        if (storeList.length > 0) {
                            $("#store").append(new Option("请选择商家", "-1"));
                            $.each(storeList, function (index, item) {
                                $('#store').append(new Option(item.storeName, item.id));
                            });
                        } else {
                            $("#store").empty();//清空下拉选择框
                            $("#store").append(new Option("暂无数据", "-1"));
                        }
                    }
                    layui.form.render("select");
                    $('#sstatementSpanId').html('');
                    $('#sstatementDiv').hide();
                }, "GET", false, function (res) {
                    layer.msg("抱歉！您暂无获取商家列表的权限");
                });
            } else {
                $("#store").empty();//清空下拉选择框
                $("#store").append(new Option("暂无数据", ""));
                layui.form.render("select");
                $('#sstatementSpanId').html('');
                $('#sstatementDiv').hide();
                $('#goodsDivId').hide();//隐藏商品表格
            }
        });

        //渲染表格
        let loadTable = function (data) {
            table.render({
                elem: '#goods1'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , cols: [
                    [
                        {type: 'checkbox', fixed: 'left', width: 30}
                        , {field: 'goodsName', title: '商品名称', width: 160}
                        , {field: 'goodsPrice', title: '单价(元)', width: 80}
                        , {field: 'goodsNum', title: '数量', width: 80, edit: 'text', value: '0'}
                    ]
                ]
                , data: data
                , loading: true
                , even: true  //开启隔行背景
                , limit: data.length
                , page: false
                , defaultToolbar: []
                , size: 'sm'  //用于设定表格尺寸
            });
        };

        //加载所有商品信息
        let loadAllGoods = function (storeId) {
            CoreUtil.sendAjax("/order/getAllGoods/" + storeId, null, function (res) {
                if (res.data != null) {
                    loadTable(res.data);
                }
            }, "GET", false, function (res) {
                layer.msg("操作失败，请联系技术人员！");
            });
        };

        //监听商家下拉框选择事件
        form.on('select(store-filter)', function (data) {
            let storeId = data.value;
            loadAllGoods(storeId);
            if (storeId != '-1') {
                CoreUtil.sendAjax("/order/getStore/" + storeId, null, function (res) {
                    let storeStatementStr = res.data.storeStatement;
                    $('#sstatementDiv').show();//显示商家声明
                    $('#goodsDivId').show();//显示商品表格
                    $('#sstatementSpanId').html('');
                    $('#sstatementSpanId').html(storeStatementStr);
                }, "GET", false, function (res) {
                    layer.msg("抱歉！您暂无获取商家列表的权限");
                });
            } else {
                $('#goodsDivId').hide();//隐藏商品表格
                $('#sstatementSpanId').html('');
                $('#sstatementDiv').hide();
            }
        });

        //点击姓名
        $("#userNameId").click(function () {
            layer.open({
                //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                type: 1,
                resize: false, //是否允许拉伸
                maxmin: false, //最大最小化
                title: "联系我-加微信",
                area: ['310px', '310px'],
                content: $("#weixinId") //引用的弹出层的页面层的方式加载修改界面表单
            });
        });

        //监听下一步
        table.on('toolbar(goodsFilter)', function (obj) {
            let checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'getCheckData':
                    let buildingNumberValue = $('input[name="buildingNumber"]').val();
                    let phoneNumberValue = $('input[name="phoneNumber"]').val();
                    if (buildingNumberValue != null && buildingNumberValue != '' && phoneNumberValue != null && phoneNumberValue != '') {
                        let data = checkStatus.data;
                        showBuyAllGoods(data);
                    } else {
                        layer.msg('请填写楼号或手机号');
                    }
                    break;
            }
        });

        //显示购买所有物品
        let showBuyAllGoods = function (data) {
            if (data.length != 0) {
                let flag = '0';
                $.each(data, function (index, item) {
                    if (item.goodsNum != null && item.goodsNum > 0) {
                        flag = '1';
                    }
                });
                if (flag === '1') {
                    let buyGoodsOrderLet = '';
                    $.each(data, function (index, item) {
                        if (item.goodsNum != null && item.goodsNum > 0) {
                            //往table中添加行信息
                            let totalPrice = item.goodsPrice * item.goodsNum;
                            trHtml += '<tr style="height: 40px;">';
                            trHtml += '<td>' + item.goodsName + '</td>';
                            trHtml += '<td>' + item.goodsPrice + '</td>';
                            trHtml += '<td>' + item.goodsNum + '</td>';
                            trHtml += '<td>' + totalPrice + '</td>';
                            trHtml += '</tr>';
                            //计算订单总价
                            orderTotalPrice += totalPrice;
                            //格式：商品名称:单价:数量#商品名称:单价:数量#商品名称:单价:数量
                            if (index === data.length - 1) {
                                buyGoodsOrderLet += item.goodsName + ':' + item.goodsPrice + ':' + item.goodsNum;
                            } else {
                                buyGoodsOrderLet += item.goodsName + ':' + item.goodsPrice + ':' + item.goodsNum + '#';
                            }
                        }
                    });
                    //将订单串赋值
                    $("#buyGoodsOrderString").html(buyGoodsOrderLet);
                    //拼接到table中
                    $("#orderTable tbody").append(trHtml);
                    $("#orderTotalPrice").append(orderTotalPrice + '元');
                    $('#buyDiv').hide();//隐藏购物模块
                    $('#buyAllGoods').show();//显示订单详情模块
                } else {
                    layer.msg('请填写商品数量');
                }
            } else {
                layer.msg('请勾选商品');
            }
        }
    });

    //提交订单
    let submitOrder = function () {
        layer.confirm('确定要提交订单吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            let orderFormString = $("#buyGoodsOrderString").text();
            let communityValue = $("#community").val();
            let storeValue = $("#store").val();
            let buildingNumberValue = $('input[name="buildingNumber"]').val();
            let phoneNumberValue = $('input[name="phoneNumber"]').val();
            let formLet = {
                communityId: communityValue
                , storeId: storeValue
                , buildingNumber: buildingNumberValue
                , phoneNumber: phoneNumberValue
                , goods: orderFormString
            };
            CoreUtil.sendAjax("/order/buy", JSON.stringify(formLet), function (res) {
                layer.msg('下单成功！');
                if (res.code === 0) {
                    let orderNum = res.data.orderNum;
                    let weixinMoney = res.data.weixinMoney;
                    let totalPrice = res.data.totalPrice;
                    let storeLinkUser = res.data.storeLinkUser;
                    let storeLinkPhone = res.data.storeLinkPhone;
                    $('#buyAllGoods').hide();//隐藏订单详情模块
                    //给订单号赋值
                    $('#orderNumId').html(orderNum);
                    //给订单总金额赋值
                    $('#orderMoneyId').html(totalPrice + '元');
                    //给收款码赋值
                    $('#weixinImgId').attr('src', weixinMoney);
                    //给商家联系人赋值
                    $('#storeLinkUser').html(storeLinkUser);
                    //给商家联系人电话赋值
                    $('#storeLinkPhone').html(storeLinkPhone);
                    $('#payDiv').show();//显示付款模块
                } else {
                    layer.msg("下单失败，请联系技术人员！");
                }
            }, "POST", false, function (res) {
                layer.msg("操作失败，请联系技术人员！");
            });
        }, function () {
            layer.msg('已取消操作！', {icon: 1});
        });
    }
</script>
</body>
</html>